<template>
  <div class="props-panel">
    <el-tabs v-model="activeName" type="card" size="small">
      <el-tab-pane label="组件选项" name="component">
        <props-option ref="propsOption" :index="$props.index"></props-option>
      </el-tab-pane>
      <el-tab-pane label="图表选项" name="chart">
        <chart-option ref="chartOption" :index="$props.index"></chart-option>
      </el-tab-pane>
      <el-tab-pane label="数据配置" name="data">
        <data-option ref="dataOption"></data-option>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import PropsOption from './option/PropsOption'
import DataOption from './data/DataOption'
import ChartOption from './chart/ChartOption'
export default {
  name: 'PropsPanel',
  components: {PropsOption, DataOption, ChartOption},
  props: {
    index: {
      type: Number
    }
  },
  data () {
    return {
      activeName: 'component'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.props-panel {
  height: 100%;
  width: 100%;
}
</style>
